<template>
  <div class="file-wrapper">
    <Row>
      <Col :xs="24" :sm="24" :md="12" :lg="12">
        <!-- 头部 -->
        <div class="file-header">
          <h3>存储位置：<a>{{bucketName}}</a></h3>
          <Progress :percent="percent" :stroke-width="3"/>
          <p>已使用：{{used}}</p>
        </div>
      </Col>
      <Col :xs="24" :sm="24" :md="12" :lg="12">
        <!-- 搜索框 -->
        <div class="file-search">
          <Input
            :border="false"
            v-model="objectName"
            placeholder="输入文件名搜索"
            @on-focus="handleOnFocus"
            @on-blur="handleOnBlur"
            :search="true"
            @on-search="handleOnSearch"
          />
          <Divider :style="{margin: '5px 0',background: searchLineStyle}"/>
        </div>
      </Col>
    </Row>

    <!-- 工具栏 -->
    <div class="tool-box">
      <Upload :action="action" name="file" :on-success="handleOnSuccess" :show-upload-list="true">
        <Button icon="ios-cloud-upload-outline">上传文件</Button>
      </Upload>
    </div>

    <!-- 文件列表 -->
    <div class="file-list">
      <Table :columns="columns" :data="data" max-height="550"></Table>
    </div>

    <!-- 图片预览 -->
    <div class="pre-file">
      <Modal
        v-model="modal"
        :title="title"
        class="config-model"
        ok-text="返回"
        cancel-text="">
        <div class="file-box">
          <img :src="img">
        </div>
      </Modal>
    </div>

    <!-- 加载等待 -->
    <Spin fix v-show="show">
      <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
      <div>处理中...</div>
    </Spin>
  </div>
</template>

<script>
import {getFiles,deleteFile,searchFile} from '@/api/file'
import config from '@/config'

const baseUrl = process.env.NODE_ENV === 'production' ? config.baseUrl.pro : config.baseUrl.dev

export default {
  name: 'File',
  data(){
    return {
      bucketName: '',
      objectName: '',
      searchLineStyle: '#e8eaec',
      used: '',
      percent: 0,
      columns: [
        {
          type: 'index',
          width: 60,
          align: 'center'
        },
        {
          title: '文件名称',
          key: 'objectName',
          minWidth: 300
        },
        {
          title: '文件大小',
          key: 'size',
          minWidth: 100
        },
        {
          title: '最近修改时间',
          key: 'lastModified',
          minWidth: 170
        },
        {
          title: '操作',
          key: 'action',
          fixed: 'right',
          width: 170,
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'text',
                  size: 'small'
                },
                on: {
                  click: () => {
                    let name = params.row.objectName
                    let type = name.substring(name.lastIndexOf(".")+1,name.length)
                    if(this.checkFile(type)){
                      this.modal = true
                      this.title = params.row.objectName
                      this.img = params.row.path
                    }else{
                      this.$Message.error('文件不支持预览')
                    }
                  }
                }
              }, '预览'),
              h('Button', {
                props: {
                  type: 'text',
                  size: 'small'
                },
                on: {
                  click: () => {
                    this.download(params.row.path,params.row.objectName)
                  }
                }
              }, '下载'),
              h('Button', {
                props: {
                  type: 'text',
                  size: 'small'
                },
                on: {
                  click: () => {
                    this.show = true
                    deleteFile(params.row.objectName).then(res => {
                      this.show = false
                      if(res.data.status){
                        this.$Message.success('删除文件成功')
                        this.getFileList()
                      }
                    }).catch(()=>{
                      this.show = false
                    })
                  }
                }
              }, '删除')
            ]);
          }
        }
      ],
      data: [],
      modal: false,
      title: '',
      show: false,
      img: '',
      action: baseUrl+'/oss/upload'
    }
  },
  methods:{
    handleOnFocus(){
      this.searchLineStyle = '#2d8cf0'
    },
    handleOnBlur(){
      this.searchLineStyle = '#e8eaec'
    },
    handleOnSearch(){
      console.log('objectName:'+this.objectName)
      searchFile(this.objectName).then(res => {
        if(res.data.status){
          this.data = res.data.data
        }
      })
    },
    /**
     * 获取文件列表
     */
    getFileList(){
      this.show = true
      getFiles().then(res => {
        this.show = false
        if(res.data.status){
          this.data = res.data.data.fileObjects
          this.used = res.data.data.totalSize
          this.percent = res.data.data.percent
          this.bucketName = res.data.data.bucketName
        }
      }).catch(()=>{
        this.show = false
      })
    },
    /**
     * 检查文件是否可以预览
     */
    checkFile(type){
      let typeList = ['jpg','jpeg','png','gif','svg']
      if(typeList.includes(type)){
        return true
      }else{
        return false
      }
    },
    download(path,name){
      const link = document.createElement('a')
      link.href = path
      link.setAttribute('download', name) // 下载文件的名称及文件类型后缀
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link); // 下载完成移除元素
    },
    handleOnSuccess(res){
      if(res.status){
        this.$Message.success('上传文件成功')
        this.getFileList()
      }else{
        this.$Notice.error({
          title: res.msg
        })
      }
    }
  },
  created(){
    //初始化文件列表
    this.getFileList()
  }
}
</script>

<style lang="less">
.file-wrapper{
  padding: 10px;
  .file-header{
    margin-bottom: 10px;
  }
  .file-search{
    margin-top: 10px;
    margin-bottom: 10px;
  }
  .file-list{
    margin-top: 10px;
    margin-bottom: 15px;
  }
  .demo-spin-icon-load{
    animation: ani-demo-spin 1s linear infinite;
  }
  .tool-box{
    padding: 10px;
    padding-left: 0;
  }
}
.config-model .ivu-modal-body{
  padding: 0;
  .file-box{
    text-align: center;
    width:600px;
    height:400px;
    display: table-cell;
    vertical-align: middle;
    img{
      max-width: 100%;
      max-height: 100%;
      display: block;
      margin: auto;
    }
  }
}
</style>
